<template>
  <div class="header">
    <div class="site-title">
      {{ siteInfo.name }}
    </div>
    <div class="user-info">
      <el-popover>
        <template #reference>
          {{ info?.realname }}
        </template>
        <template #default>
<!--          <span class="user-info-line">真实姓名：{{ info?.realname }}</span>-->
<!--          <span class="user-info-line">用户身份：{{ info?.roleName }}</span>-->
          <div class="log-out-btn">
            <el-button type="warning" size="small" @click="handleLogOut()"> 登出系统 </el-button>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  userInfo: UserInfo,
  siteInfo: SiteInfo,
}>();

const info = ref<any>(props.userInfo);

watch(
  ()=>props.userInfo,
  (val)=>{info.value = val;}
)

const handleLogOut = ()=>{
  window.localStorage.removeItem("token");
  window.location.href = "/login";
}


</script>


<style scoped>
.header{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--main-header-background);
  box-shadow: #CCCCCC 1px 1px 5px;
  padding: 0;
}

.site-title{
  margin: 5px;
  font-size: 1.2em;
  color: var(--main-font-color);
  cursor: pointer;
}

.user-info{
  margin: 5px;
  font-size: 1em;
  color: var(--main-font-color);
  cursor: pointer;
}

.user-info-line{
  display: block;
  height: 25px;
  margin: 10px 5px;
  cursor: pointer;
}

.log-out-btn {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

</style>